<template>
	<view class="message-item-container">
			<view class="u-p-b-20" style="width: 100%;">
				<!-- 系统信息-->
				<view v-if="item.messageType==0">
					<view style="text-align: center;color:#aaaaaa;font-size: 28rpx;">
						<text v-if="item.formatTimeStr&&item.formatTimeStr.length>0">
							{{item.formatTimeStr}}
						</text>
						<text v-else>
							<!-- {{item.createTime.substring(10,16)}} -->
							{{globalUtil.fromatMsgTime(item.createTime)}}
						</text>
					</view>
					<view  style="text-align: center;color:#aaaaaa;font-size: 30rpx;">
						{{parseSYSContent(item)}}
					</view>
				</view>
				<!-- 用户信息 -->
				<view v-else>
					<view class="chat-time">
						<text v-if="item.showTimeFlag">
							<text v-if="item.formatTimeStr&&item.formatTimeStr.length>0">
								{{item.formatTimeStr}}
							</text>
							<text v-else>
								<!-- {{item.createTime.substring(10,16)}} -->
								{{globalUtil.fromatMsgTime(item.createTime)}}
							</text>
						</text>
					</view>
					<view v-if="groupType!=0" :class="{'chat-user-name':true,'chat-location-me':item.meFlag}">
						<text>{{item.userName}}</text>
					</view>
					<view :class="{'chat-container':true,'chat-location-me':item.meFlag}">
						<view class="chat-icon-container" @click.stop="toFriendHome(item)">
							<image :class="{'chat-icon':true,'chat-icon-me':item.meFlag}"
								:src="item.userAvatar?item.userAvatar:'/static/image/default/default-user/default-user.png'"
								mode="aspectFill"/>
						</view>
						<view class="chat-content-container u-p-t-10" @longpress="showToolTip">
							<!-- 文字信息 -->
							<view  v-if="item.contentType == messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE">
								<view :class="{'chat-text-container':true,'chat-text-container-me u-text-reserve':item.meFlag}">
									<u-parse :html="parseTextContent(item)"
										:tag-style="tagStyle">
									</u-parse>
								</view>
							</view>
							<!-- 图片信息 -->
							<view v-if="item.contentType == messageApi.CONTENT_TYPE.IMG_CONTENT_TYPE">
								<view class="content contentType3" @tap="showPic(item)">
									<u-image :width="item.content.width*2" :height="item.content.height*2"
										:lazy-load="true" mode="widthFix" :src="parseImageSrc(item)">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
							</view>
							<!--视频信息-->
							<view v-if="item.contentType == messageApi.CONTENT_TYPE.VIDEO_CONTENT_TYPE">
								<view class="content contentType3" @click="boFangVideo(item)">
									<view>
										<image :src="parseVideoScreenShotSrc(item)"
											:style="'background-color:#000000;width:'+parseImgSize(item,'w')+'rpx;height:'+parseImgSize(item,'h')+'rpx'">
										</image>
									</view>
									<view class="u-flex u-row-center u-col-center"
										:style="'width:'+parseImgSize(item,'w')+'rpx;height:'+parseImgSize(item,'h')+'rpx;margin-top:-'+parseImgSize(item,'h')+'rpx;'">
										<u-icon name="play-circle-fill" color="#f0f0f0" :size="80"></u-icon>
									</view>
								</view>
							</view>
							<!-- 语音消息 -->
							<view v-if="item.contentType== messageApi.CONTENT_TYPE.AUDIO_CONTENT_TYPE">
								<view @tap="handleAudio(item)"
									:class="{'content-audio-container':true,'chat-audio-container-me':item.meFlag}"
									:style="'width:'+((item.content.contentDuration)*2+130)+'rpx'">
									<view 	class="voice_icon" 
											:class="[ 
													{ voice_icon_right: item.meFlag },
													{ voice_icon_left: !item.meFlag },
													{ voice_icon_right_an: item.content.anmitionPlay && item.meFlag },
													{ voice_icon_left_an: item.content.anmitionPlay && !item.meFlag }
											]">
									</view>
									<view class="">{{item.content.contentDuration}}''</view>
								</view>
							</view>
							<!-- 红包信息 -->
							<view v-if="item.contentType==messageApi.CONTENT_TYPE.RED_BAG_CONTENT_TYPE">
								<!-- 已经领取过 -->
								<template v-if="getTransferReceiveStatus(item)==true">
									<view @click="showRedBag(item)"
										style="opacity: 0.5;"
										class="contentType-redbag">
										<view class="u-flex u-row-between u-col-center">
											<view class="u-m-r-20">
												<u-image  mode="scaleToFill" src="/static/image/chat/redbag/redbag-open.png"
													width="70rpx" height="80rpx">
												</u-image>
											</view>
											<view style="font-size: 36rpx;min-width: 320rpx;"
												 :class="item.meFlag?'u-text-reserve':''">
												<view class="u-line-1 u-font-32">{{item.content.redBagRemark}}</view>
												<view v-if="item.content.receiveAllFlag"
													style="font-size: 12px;">
													<text>已被领完</text>
												</view>
												<view v-else>
													<view style="font-size: 12px;">
														<text>已经领取</text>
													</view>
												</view>
											</view>
										</view>
										
										<view :class="item.meFlag?'u-text-reserve':''"
											style="font-size: 24rpx;margin-top:16rpx;">
											<view style="opacity: 0.1;">
												<u-divider height="1rpx"  half-width="50" border-color="#ffffff"></u-divider>
											</view>
											<view class="u-m-t-4" style="color: #eeeeee;">
												微信红包
											</view> 
										</view>
									</view>	
								</template>
								<!-- 没领取 -->
								<template v-else>
									<view @click="openRedBag(item)" class="contentType-redbag">
										<view class="u-flex u-row-between u-col-center">
											<view class="u-m-r-20">
												<u-image v-if="item.content.receiveAllFlag==false"
													mode="scaleToFill" 
													src="/static/image/chat/redbag/redbag.png" 
													width="70rpx"
													height="80rpx">
												</u-image>
											</view>
											<view style="font-size: 36rpx;min-width: 320rpx;"
												:class="item.meFlag?'u-text-reserve':''">
												<view class="u-line-1 u-font-32">{{item.content.redBagRemark}}</view>
											</view>
										</view>
										<view :class="item.meFlag?'u-text-reserve':''"
											style="font-size: 24rpx;margin-top:16rpx;">
											<view style="opacity: 0.1;">
												<u-divider height="1rpx"  half-width="50" border-color="#ffffff"></u-divider>
											</view>
											<view class="u-m-t-4" style="color: #eeeeee;">
												微信红包
											</view> 
										</view>
									</view>	
								</template>
							</view>
							<!-- 转账信息 -->
							<view v-if="item.contentType==messageApi.CONTENT_TYPE.TRANSFER_CONTENT_TYPE" 
									@click="showTransferPop(item)" >
								<!-- 已经领取 -->
								<template v-if="getTransferReceiveStatus(item)==true">
										<view 	style="opacity: 0.5;"
												class="contentType-redbag">
											<view class="u-flex u-row-between u-col-center">
												<view class="u-m-r-20">
													<u-icon name="checkmark-circle" :size="80" color="#ffffff"></u-icon>
												</view>
												<view style="font-size: 36rpx;min-width:320rpx;"
														:class="item.meFlag?'u-text-reserve':''">
													<view class="u-font-32">
														<text style="font-weight: bold;">￥{{Number(item.content.transferAmount).toFixed(2)}}</text>
													</view>
													<view  style="font-size: 12px;">
														<text v-if="item.content.receiveMsgId">{{item.meFlag?'已收款':'已收款'}}</text>
														<text v-else>已被接收</text<>
														<!-- <text>已收款</text> -->
													</view>
												</view>
											</view>
											<view :class="item.meFlag?'u-text-reserve':''"
												style="font-size: 24rpx;margin-top:16rpx;">
												<view style="opacity: 0.1;">
													<u-divider height="1rpx"  half-width="50" border-color="#ffffff"></u-divider>
												</view>
												<view class="u-m-t-4" style="color: #eeeeee;">
													微信转账
												</view> 
											</view>
										</view>
								</template>
								<!-- 没有领取 -->
								<template v-else>
										<view class="contentType-redbag">
											<view class="u-flex u-row-between u-col-center">
												<view class="u-m-r-20">
														<u-image
															mode="scaleToFill" src="/static/image/chat/redbag/transfer.png" width="80rpx"
															height="80rpx">
														</u-image>
												</view>
												<view style="font-size: 36rpx;min-width:320rpx;" :class="item.meFlag?'u-text-reserve':''">
													<view class="u-font-32">
														<text style="font-weight: bold;">￥{{Number(item.content.transferAmount).toFixed(2)}}</text>
													</view>
													<view class="u-line-1 u-font-26 u-p-l-5">
														<text>{{item.content.fromUserId==vuex_userInfo.id?item.content.transferRemark:'请收款'}}</text>
													</view>
												</view>
											</view>
											<view :class="item.meFlag?'u-text-reserve':''"
												style="font-size: 24rpx;margin-top:16rpx;">
												<view style="opacity: 0.1;">
													<u-divider height="1rpx"  half-width="50" border-color="#ffffff"></u-divider>
												</view>
												<view class="u-m-t-4" style="color: #eeeeee;">
													微信转账
												</view> 
											</view>
										</view>
								</template>
							</view>
							<!-- 聊天记录 -->
							<view v-if="item.contentType==10">
								<view class="contentType-file" @click="openChatRecord(item)"
									:class="item.meFlag?'u-text-reserve':''">
									<view style="padding: 20rpx 10rpx 10rpx 20rpx;">
										<view style="width: 400rpx;">
											<view class="u-line-2" style="font-size: 32rpx;">{{parseChatRecordTitle(item)}}
											</view>
										</view>
										<view class="u-m-t-10 u-m-b-10">
											<view style="font-size: 28rpx;color: #aaaaaa;" class="u-line-1"
												v-for="(contentItem,contentIndex) in JSON.parse(item.content).splice(0,3)"
												:key="contentIndex">
												<text>{{parseChatRecord(contentItem)}}</text>
											</view>
											<view v-if="JSON.parse(item.content).length>3"
												style="font-size: 28rpx;color: #aaaaaa;">
												<text>......</text>
											</view>
										</view>
									</view>
									<view style="font-size: 12px;padding: 10rpx 20rpx;color: #909399;" class="u-border-top">
										聊天记录</view>
								</view>
							</view>
							<!-- 图文或者视频文字 -->
							<view v-if="item.contentType==11||item.contentType==12">
								<view class="contentType-fixed">
									<view class="u-m-b-10" :class="item.meFlag?'u-text-reserve':''">
										<u-parse :html="formatComponetContent(item,1)"
											:tag-style="{'img':'width:26px;height:26px;position:relative;top: 10rpx;'}">
										</u-parse>
									</view>
									<!-- 图片文字组合-->
									<view v-if="item.contentType==11" @tap="showPic(item)"
										class="u-flex u-row-center u-col-center">
										<u-image :width="parseImgSize(item,'w')" :height="parseImgSize(item,'h')"
											:lazy-load="false" :border-radius="10" mode="widthFix"
											:src="formatComponetContent(item,2)">
											<u-loading slot="loading"></u-loading>
										</u-image>
									</view>
									<!-- 视频文字组合-->
									<view v-else class="u-flex u-row-left u-col-center">
										<view @click="boFangVideo(item)">
											<view>
												<image :src="formatComponetContent(item,2)" :style="(formatComponetContent(item,2)==''?'background-color:#000000;':'')+
																'width:'+parseImgSize(item,'w')+'rpx;height:'+parseImgSize(item,'h')+'rpx'">
												</image>
											</view>
											<view class="u-flex u-row-center u-col-center"
												:style="'width:'+parseImgSize(item,'w')+'rpx;height:'+parseImgSize(item,'h')+'rpx;margin-top:-'+parseImgSize(item,'h')+'rpx;'">
												<u-icon name="play-circle-fill" color="#f0f0f0" :size="80"></u-icon>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="u-p-t-20" v-if="item.content.refuseTips">
							<u-icon name="error-circle-fill" color="#fa3534" :size="60"></u-icon>
						</view>
					</view>
					<view   class="chat-time" v-if="item.content.refuseTips">
						<text>
						   {{item.content.refuseTips}}
						</text>
					</view>
				</view>
			</view>
			<!-- 视频预览弹窗 -->
			<view v-if="previewVideoFlag==true">
				<videoPlayer :previewVideoFlag="previewVideoFlag" :previewVideoSrc="previewVideoSrc"
					@quitPlay="stopPlayVideo()"></videoPlayer>
			</view>
			<!-- 红包弹窗 -->
			<view v-if="redbagPopFlag">
				<u-popup v-model="redbagPopFlag" mode="center" border-radius="14"  
						 :mask-custom-style="maskCustomStyle"
						 width="70%" height="60%">
					<view style="background-color: #f45e4d;height: 80%;border-radius: 14rpx;padding-top: 50rpx;">
						<view>
							 <view  class="u-flex u-row-center u-col-center u-p-t-80">
								  <view class="u-m-r-20">
										<u-image :src="currentRedBagInfo.userAvatar" 
												width="46rpx" height="46rpx" border-radius="8">
											<view slot="error">
												<u-image width="46rpx" height="46rpx" src="/static/image/default/default-user/default-user.png" border-radius="8"></u-image>
											</view>
										</u-image>
								  </view>	
								  <view style="font-size: 30rpx;color: #ebcd99;">
									 {{currentRedBagInfo.userName}}发出的红包   
								  </view>
							 </view>
							 <view style="font-size: 34rpx;text-align: center;margin-top: 16rpx;color: #909399;color: #ebcd99;">
								  <text>{{currentRedBagInfo.content.redBagRemark}}</text>
							 </view>
						 </view>
						<view 	style="margin-top: 60%;text-align: center;width: 100%;" 
								class="u-flex u-row-center u-col-center">
							<view @click="receiveRedBag()"
								class="u-flex u-row-center u-col-center"
								style="width: 150rpx;height: 150rpx;background-color: #ebcd99;border-radius: 75rpx;">
								<view style="font-size: 70rpx;text-align: center;">開</view>
							</view>
						</view>
					</view>
					<view style="height: 20%;text-align: center;width: 100%;" 
							class="u-flex u-row-center u-col-bottom u-p-b-30">
						<view 	class="u-flex u-row-center u-col-center" 
								@click="cancelReceiveRedBag()"	
								style="border:2px solid #ebcd99; text-align: center;padding: 20rpx;width: 80rpx;height: 80rpx;border-radius: 40rpx;">
							<u-icon name="close" :size="46" color="#ebcd99"></u-icon>
						</view>
					</view>
				</u-popup>
			</view>
			
			<!-- 长按菜单 -->
			<chunLei-popups v-model="toolTipFlag" :popData="toolTipData" @tapPopup="tapPopup" 
				:x="toolTipX" :y="toolTipY" :placement="popPostion"
				direction="row" theme="dark" :dynamic="true">
			</chunLei-popups>
	</view>
</template>

<script>
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import videoPlayer from '@/components/videoPlayer/videoPlayer.vue';
	var previewSrcArr = [];
	export default {
		name: "message-item",
		components:{
			videoPlayer,chunLeiPopups
		},
		props: {
			item: {
				type: Object,
				default: function() {
					return {
						"id": "",
						"chatGroupId": "",
						"userId": 0,
						"meFlag": true,
						"userName": '',
						"userAvatar": "",
						'messageType': "",
						"contentType": "",
						"content": {},
						"timestamp": "",
						"createTime": "",
						"platFrom": this.messageApi.msgPlat,
					}
				}
			},
			groupType:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				tagStyle:{
					img:'width:22px;height:22px;position:relative;top:10rpx;',
					span:'margin:0px;padding:0px;font-size:32rpx',
				},
				previewVideoFlag:false, //播放视频控制器
				previewVideoSrc:'',		//预览的视频地址
				redbagPopFlag:false,	//红包弹窗
				transferPopFlag:false,	//转账弹窗
				maskCustomStyle:{
					background: 'rgba(255, 255, 255, 0.7)'
				},
				currentRedBagInfo:null,
				toolTipX: 0,
				toolTipY: 0,
				toolTipFlag: false,
				popPostion:"default",
				toolTipData: [],			
			};
		},
		mounted:function(){
			if(this.item.contentType==this.messageApi.CONTENT_TYPE.TRANSFER_CONTENT_TYPE){
				//console.log("监听到转账的信息",this.item);
				let receiveMsgId= this.item.content.receiveMsgId;
				if(receiveMsgId){
					let param={
						id:receiveMsgId
					}
					//console.log("监听到转账的信息去检查转账是否领取",param);
					this.$emit("reloadMessage",receiveMsgId);
				}
			}
			if(this.item.messageType==0&&this.item.contentType==this.messageApi.CONTENT_TYPE.RED_BAG_CONTENT_TYPE){
				//console.log("领取红包的系统信息",this.item);
				//领取红包的系统信息,更新对应红包的领取状态
				let redbagMsgId=this.item.content.messageId;
				this.$emit("reloadMessage",redbagMsgId);
				//如果群聊红包弹窗打开的情况下，要去重新加载领取记录
				uni.$emit("updateRedBagDetail",redbagMsgId);
			}
		},
		methods: {
			//获取用户头像(这里如果用户修改过头像后就没有及时更新，那么最好去后端查询，后端可以放redis缓存)
			formatUserAvatar:function(item){
				//console.log("item",item);
				let that=this;
				let userId= item.userId;
				let userLocalAvatar=item.userAvatar;
				return  userLocalAvatar;
			},
			//跳转好友界面
			toFriendHome:function(msg){
				if(msg.meFlag==false){
					this.$emit("linkToFriend",msg);
				}
			},
			//格式化系统信息内容	
			parseSYSContent:function(item){
				let that=this;
				let contentType = item.contentType;
				let contentObj=item.content;
				let sysType=contentObj.sysMsgType;
				if (contentType == 1) {
					let msgStr = contentObj.text;
					return msgStr;
				}
				if(contentType==that.messageApi.CONTENT_TYPE.RED_BAG_CONTENT_TYPE){
					let optionType= contentObj.optionType;
					//领取红包
					if(optionType=="receive"){
						let from= contentObj.fromUserId;
						let receiveUserId=contentObj.receiveUserId;
						let receiveUserName= contentObj.receiveUser;
						if(this.groupType==0){
							if(from==that.vuex_userInfo.id){
								return receiveUserName+"领取了你的红包"
							}else{
								return "你领取了"+contentObj.fromUserName+"的红包"
							}
						}
						else{
							if(receiveUserId==that.vuex_userInfo.id){
								return "你领取了红包"
							}
							return receiveUserName+"领取了红包"
						}
					}
				}
				if(sysType==that.messageApi.SYS_MSG_TYPE.revertMessage){
					if(item.userId==that.vuex_userInfo.id){
						return `"你撤回了一条信息~"`;
					}
					return `"对方撤回了一条信息~"`;	
				}
			},
			//格式化组合信息内容
			formatComponetContent: function(item, type) {
				let that = this;
				let contentType = item.contentType;
				let contentObj=item.content;
				if (type == 1) {
					let msgStr =contentObj.textDesc;
					let transText = that.globalUtil.transform(msgStr, "", "");
					return transText;
				}
				if (type == 2) {
					if (item.contentType == 12) {
						let screenShot = contentObj.screenShot;
						if (screenShot) {
							if(contentObj.fileSaveTarget=="local"){
								screenShot=this.$u.api.multipartAddress.getFileByPath+screenShot;	
							}
							return screenShot;
						}
						 return "";
					}
					if (item.contentType == 11) {
						let url= contentObj.fullPath;
						let target= contentObj.fileSaveTarget;
						if(target=="local"){
							url= this.$u.api.multipartAddress.getFileByPath+url;
						}
						if (url) {
							if(previewSrcArr.indexOf(url)==-1){
								previewSrcArr.unshift(url);
							};
						}
						return url;
					}
			
				}
			},
			//文本内容格式化
			parseTextContent: function(item) {
				let that=this;
				let contentType = item.contentType;
				let contentObj=item.content;
				let msgStr = contentObj.text;
				let sysType = contentObj.contentType; //内容类型
				let optionType = contentObj.optionType;
				let transText = that.globalUtil.transform(msgStr);
				return transText;
			},
			//图片缩略图
			parseImageSrc:function(item){
				let that=this;
				let msgId= item.id;
				let localSrc= uni.getStorageSync("image"+msgId);
				if(localSrc){
					console.log("本地有存储")
					return localSrc;
				}
				//console.log("图片信息",item);
				let contentObj=item.content;
				let url= contentObj.fullPath;
				let target= contentObj.fileSaveTarget;
				if(target=="local"){
					//url= this.$u.api.multipartAddress.getFileByPath+url;
					let fileName= contentObj.fileName;
					url=this.$u.api.multipartAddress.showFile+url;
					//console.log("url",url);
				}
				if (url) {
					if(previewSrcArr.indexOf(url)==-1){
						previewSrcArr.unshift(url);
					};
				};
				return url;
			},
			//视频缩略图
			parseVideoScreenShotSrc:function(item){
				let that=this;
				let msgId= item.id;
				let localSrc= uni.getStorageSync("image"+msgId);
				if(localSrc){
					return localSrc;
				};
				let contentType = item.contentType;
				let contentObj=item.content;
				let screenShot = contentObj.screenShot;
				if (screenShot) {
					if(contentObj.fileSaveTarget=="local"){
						screenShot=this.$u.api.multipartAddress.getFileByPath+screenShot;	
					}
					return screenShot;
				} 
				return "";
			},
			//图片显示尺寸控制
			parseImgSize: function(item, type) {
				let contentObj=item.content;
				let height = contentObj.height;
				let width = contentObj.width;
				if (type == "h") {
					if (height == null || height == undefined) {
						return "auto";
					} else {
						return height * 2;
					}
				} else {
					if (width == null || width == undefined) {
						return 300;
					} else {
						return width * 2;
					}
				}
			},
			//预览图片			
			showPic:function(item){
				let url= item.content.fullPath;
				let target= item.content.fileSaveTarget;
				if(target=="local"){
					url= this.$u.api.multipartAddress.getFileByPath+url;
				}
				uni.previewImage({
					urls: previewSrcArr.length > 0 ? previewSrcArr : [url],
					current: url,
					loop: false,
				});
			},
			//控制播放还是暂停音频文件
			handleAudio(item) {
				this.$emit("handleAudio",item);
			},
			//播放视频
			boFangVideo: function(item) {
				let that = this;
				let videoContent = item.content;
				let videoSrc = videoContent.fullPath;
				let target= item.content.fileSaveTarget;
				if(target=="local"){
					videoSrc= this.$u.api.multipartAddress.getFileByPath+videoSrc;
				}
				this.previewVideoSrc = videoSrc;
				this.previewVideoFlag = true;
			},
			//关闭播放视频
			stopPlayVideo: function() {
				this.previewVideoFlag = false;
			},
			//查看已经领取的红包
			showRedBag(msgItem){
				let that=this;
				let contentObj =msgItem.content;
				let receiveFlag= msgItem.content.receiveAllFlag;
				let redbagType= msgItem.content.redBagType;
				let param={
					redbagMsg:encodeURIComponent(JSON.stringify(msgItem)),
				};
				//跳转红包详情
				this.$u.route({
					url:'/pages/tabbar/group/chat/redbag/red-bag-detail',
					params:param
				})
			},
			//打开红包弹窗
			openRedBag(msgItem){
				let that=this;
				that.validateTransferMsg(msgItem.id,function(res){
					if(res==true){
						let fromUserId= msgItem.content.fromUserId;
						let redbagType= msgItem.content.redBagType;
						//如果是自己发出去的红包，并且是（redbagType==0）点对点红包，那自己不能领取自己的红包，只能查看
						if(fromUserId==that.vuex_userInfo.id&&redbagType==0){
							console.log("自己查看没有领取的红包");
							that.$u.route({
								url:'/pages/tabbar/group/chat/redbag/red-bag-detail',
								params:{
									redbagMsg:encodeURIComponent(JSON.stringify(msgItem)),
								}
							})
						}
						else{
							//别人发的红包,或者是群组红包，就去领取红包
							that.currentRedBagInfo=msgItem; //当前被领取的红包信息
							that.redbagPopFlag=true;//打开领取红包的弹窗
							return;
						}
					}else{
						that.$emit("reloadMessage");
					}
				})
			},
			//是否领取过
			getTransferReceiveStatus(msgItem) {
				let that = this;
				//console.log("msgItem",msgItem);
				let receiveAllFlag= msgItem.content.receiveAllFlag;
				let receiveUsers= msgItem.content.receiveUsers;
				//是否已经全部领取
				if(receiveAllFlag){
					//console.log("已经全部领完");
					return true;
				}else{
					//console.log("receiveUsers",receiveUsers);
					if(receiveUsers&&receiveUsers.length>0){
						if(that.groupType==0){
							return true;
						}else{
							for (let receiveItem of receiveUsers) {
								if(receiveItem.userId==that.vuex_userInfo.id){
									//console.log("有我的领取记录",receiveItem)
									return true;
								}
							}
						}
					}
					return false;
				};
			},
			
			validateTransferMsg:function(messageItemId,callback){
				let  that=this;
				let param={msgId:messageItemId};
				this.$u.api.chatGroup.getTransferReceiveRecords(param).then(res => {
					if(res.code==200){
						let receiveUsers=res.data;
						let groupType=that.groupType;
						if(receiveUsers&&receiveUsers.length>0){
							if(groupType==0){
								callback(false);
								return;
							}
							else{
								for (let receiveItem of receiveUsers) {
									if(receiveItem.userId==that.vuex_userInfo.id){
										callback(false);
										return;
									}
								}
							}
						}
					}
					callback(true);
				}).catch(()=>{
					callback(true);
				})	
			},	
			
			//取消领取
			cancelReceiveRedBag:function(){
				let that=this;
				this.currentRedBagInfo=null;
				this.redbagPopFlag=false;
			},
			//领取红包
			receiveRedBag:function(){
				let that=this;
				let redbagType=this.currentRedBagInfo.content.redBagType;
				if(redbagType==0){
					this.receiveSingleRedBag();//领取点对点红包
				}
				else{
					this.receiveGroupRedBag();//领取群聊红包
				}
			},
			//领取点对点红包
			receiveSingleRedBag:function(){
				let that=this;
				this.$u.api.chatGroup.receviceRedBag(this.currentRedBagInfo).then(res => {
					if(res.code==200){
						let status=res.data;
						that.currentRedBagInfo.content.receiveStatus=status;
						//领取成功
						if(status==1){
							that.currentRedBagInfo.content.receiveAllFlag=true;
							let timestamp= new Date().getTime();
							let message = {
								"id": new Date().getTime() + "",
								"chatGroupId": that.currentRedBagInfo.chatGroupId,
								"userId": that.vuex_userInfo.id,
								"meFlag": true,
								"userName": that.vuex_userInfo.userName,
								"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
									"/static/image/default/default-user/default-user.png",
								'messageType': that.messageApi.MSG_TYPE.SYSTEM_MSG,
								"contentType": that.messageApi.CONTENT_TYPE.RED_BAG_CONTENT_TYPE,
								"content":{
									'fromUserName':that.currentRedBagInfo.userName,
									'fromUserId':that.currentRedBagInfo.userId,
									'receiveUser':that.vuex_userInfo.userName,
									'receiveUserId':that.vuex_userInfo.id,
									'messageId':that.currentRedBagInfo.id,
									'optionType':'receive',
								},
								"createTime": that.globalUtil.getTimeStr(timestamp),
								"timestamp": timestamp,
								"platFrom": this.messageApi.msgPlat,
								"showTimeFlag": true,
							};
							console.log("发送领取红包的信息", message);
							that.globalWX.sendMessage(message, {
								complete: function(res) {
									if (res == true) {
										that.redbagPopFlag=false;
									} else {
										that.globalUtil.utilAlert("网络故障，稍后重试！");
										return;
									}
								}
							},that.messageApi.BUSINESS_CODE.chatting);
						}
					}
				})
			},
			//领取群聊红包
			receiveGroupRedBag: function() {
				let that = this;
				that.$u.api.chatGroup.receviceRedBagForGroup(this.currentRedBagInfo).then(res => {
					console.log("领取群聊红包结果", res);
					if (res.code == 200) {
						let status=res.data;
						//领取成功
						if(status==1){
							let timestamp= new Date().getTime();
							let message = {
								"id": new Date().getTime() + "",
								"chatGroupId": that.currentRedBagInfo.chatGroupId,
								"userId": that.vuex_userInfo.id,
								"meFlag": true,
								"userName": that.vuex_userInfo.userName,
								"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
									"/static/image/default/default-user/default-user.png",
								'messageType': that.messageApi.MSG_TYPE.SYSTEM_MSG,
								"contentType": that.messageApi.CONTENT_TYPE.RED_BAG_CONTENT_TYPE,
								"content":{
									'fromUserName':that.currentRedBagInfo.userName,
									'fromUserId':that.currentRedBagInfo.userId,
									'receiveUser':that.vuex_userInfo.userName,
									'receiveUserId':that.vuex_userInfo.id,
									'messageId':that.currentRedBagInfo.id,
									'optionType':'receive',
								},
								"createTime": that.globalUtil.getTimeStr(timestamp),
								"timestamp": timestamp,
								"platFrom": this.messageApi.msgPlat,
								"showTimeFlag": true,
							};
							console.log("发送领取红包的信息", message);
							that.globalWX.sendMessage(message, {
								complete: function(res) {
									if (res == true) {
										that.redbagPopFlag=false;
									} else {
										that.globalUtil.utilAlert("网络故障，稍后重试！");
										return;
									}
								}
							},that.messageApi.BUSINESS_CODE.chatting);
						}else{
							that.globalUtil.utilAlert("您已经领取过");
							that.redbagPopFlag=false;
						}
					}
				})
			},
			//查看转账信息详情
			showTransferPop:function(msgItem){
				let that=this;
				let hadReceiveFlag=that.getTransferReceiveStatus(msgItem);
				if(hadReceiveFlag){
					msgItem.content.receiveAllFlag=true;
				};
				that.$u.route({
					url:'/pages/tabbar/group/chat/transfer/transfer-detail',
					params:{
						transferInfo:encodeURIComponent(JSON.stringify(msgItem))
					}
				})
			},
			//操作项
			showToolTip: function(e) {
				let that = this;
				that.toolTipData=[
				{
					id: 1,
					icon: '/static/image/chat/longTipIcon/copy.png',
					title: '复制',
					disabled: false
				},
				/* {
					id: 4,
					icon: '/static/image/chat/longTipIcon/zhuanfa.png',
					title: '转发',
					disabled: false
				}, */
				{
					id: 5,
					icon: '/static/image/chat/longTipIcon/tag.png',
					title: '编辑',
					disabled: false
				}];
				let meFlag=that.item.userId==that.vuex_userInfo.id;
				that.toolTipX =e.touches[0].clientX;
				that.toolTipY = e.touches[0].clientY-20;
				that.toolTipFlag = !that.toolTipFlag;
				if(that.toolTipFlag==true){
					let nowTime=new Date().getTime();
					let msgTime=that.item.timestamp;
					let diff= nowTime-msgTime;
					if(meFlag&&diff<120000){
						that.toolTipData.push({
							id: 3,
							icon: '/static/image/chat/longTipIcon/revert.png',
							title: '撤回', 
							disabled: false
						})
					}
				}
			},
			tapPopup(e) {
				let that = this;
				let currentHandleMsg=that.item;
				if (e.title == "撤回") {
					let editMessage=JSON.parse(JSON.stringify(currentHandleMsg));
					that.$emit("revertMsg",editMessage)
					that.toolTipFlag = false;
				}
				if (e.title == "复制") {
					let content = currentHandleMsg.content;
					if (content) {
						let copyContent =content.text;
						let formatStr = this.replaceReseverEmoji(copyContent);
						that.globalUtil.uniCopy({
							content: formatStr,
							success: (res) => {
								uni.showToast({
									title: res,
									icon: 'none'
								})
							},
							error: (e) => {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 3000,
								})
							}
						})
					}
					that.toolTipFlag = false;
					return;
				}
				if (e.title == "转发") {
					that.toolTipFlag = false;
					/* that.$u.route({
						url: '/pages/chat/chatGroup/msgForward',
						params: {
							msgList:encodeURIComponent(JSON.stringify([currentHandleMsg])),
							sendType: 1, //1 单条转发 2多条转发
							fromChatGroupId: currentHandleMsg.groupId
						}
					}) */
					return
				}
				if(e.title=="调换"){
					that.toolTipFlag = false;
					return;
				}
				if (e.title == "多选") {
					that.toolTipFlag = false;
					/* that.$u.route({
						url: '/pages/chat/chatting/chatting-checkbox',
						params: {
							groupId:currentHandleMsg.groupId,
							pageNum:1,
							selectMsgId: currentHandleMsg.id,
						}
					}) */
					return
				}
				if(e.title=="编辑"){
					let editMessage=JSON.parse(JSON.stringify(currentHandleMsg));
					editMessage.formatTimeStr=currentHandleMsg.createTime;
					that.$emit("showUpdateMsg",editMessage)
					that.toolTipFlag = false;
					return;
				}
			},
			replaceReseverEmoji: function(str) {
				let replacedStr = str.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
					let alt = face.replace(/^face/g, '');
					return alt;
				})
				//console.log("replacedStr", replacedStr);
				return replacedStr;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.message-item-container {
		padding:0 25rpx;
	}

	.chat-time {
		padding: 4rpx 0rpx;
		text-align: center;
		font-size: 28rpx;
		color: #aaaaaa;
	}

	.chat-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		justify-items: flex-start;
		align-items: flex-start;
	}

	.chat-location-me {
		flex-direction: row-reverse;
		text-align: right;
	}

	.chat-icon-me {
		//margin-right:5rpx;
	}

	.chat-icon-container {
		margin-top: 12rpx;
	}

	.chat-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.chat-content-container {
		margin: 0rpx 15rpx;
		max-width: 70%;
		font-size: 32rpx;
	}

	.chat-user-name {
		font-size: 26rpx;
		color: #888888;
	}

	.chat-text-container {
		//word-break: break-all;
		word-wrap:break-word;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
		margin-top: 5rpx;
		font-size:  32rpx;
	
	}

	.chat-text-container-me {
		background-color: #95ec69;
	}

	.emoji {
		width: 40rpx !important;
		height: 40rpx !important;
		position: relative;
		top: 10rpx;
	}

	//语音信息样式
	.content-audio-container {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 25rpx 20rpx;
		margin-top: 5rpx;
		/* #ifndef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
		display: flex;
		flex-direction: row;
		align-items: center;

		.voice_icon {
			height: 34rpx;
			width: 34rpx;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.voice_icon_right {
			background-image: url('@/static/image/chat/voice/voice-left-3.png');
			margin-left: 10rpx;
		}

		.voice_icon_left {
			background-image: url('@/static/image/chat/voice/voice-right-3.png');
			margin-right: 10rpx;
		}

		.voice_icon_right_an {
			animation: voiceAn_right 1s linear alternate infinite;
		}

		.voice_icon_left_an {
			animation: voiceAn_left 1s linear alternate infinite;
		}

		@keyframes voiceAn_right {
			0% {
				background-image: url('@/static/image/chat/voice/voice-left-1.png');
			}

			50% {
				background-image: url('@/static/image/chat/voice/voice-left-2.png');
			}

			100% {
				background-image: url('@/static/image/chat/voice/voice-left-3.png');
			}
		}

		@keyframes voiceAn_left {
			0% {
				background-image: url('@/static/image/chat/voice/voice-right-1.png');
			}

			50% {
				background-image: url('@/static/image/chat/voice/voice-right-2.png');
			}

			100% {
				background-image: url('@/static/image/chat/voice/voice-right-3.png');
			}
		}
	}

	//我的语音信息样式
	.chat-audio-container-me {
		background-color: #95ec69;
		flex-direction: row-reverse;
	}

	//文件信息样式
	.contentType-file {
		width: 450rpx;
		padding: 0;
		border-radius: 10rpx;
		border: 1rpx solid #e4e7ed;
		background-color: #ffffff !important;
	}

	//红包
	.contentType-redbag {
		padding: 20rpx 30rpx;
		padding-bottom: 6rpx;
		border-radius: 10rpx;
		background-color: #f29100;
		color: #ffffff;
		//margin-top: -35rpx;
		margin-top: 5rpx;
	}

	//位置
	.contentType-location {
		width: 500rpx;
		padding: 0rpx 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #e4e7ed;
		background-color: #ffffff !important;
	}

	//组合信息
	.contentType-fixed {
		border-radius: 10rpx;
		font-size: 32rpx;
		word-break: break-word;
		padding: 20rpx;
		background-color: #95ec69 !important;
		border: 1rpx solid #e4e7ed;
		max-width: 400rpx;

		.img {
			width: 200rpx;
			height: auto;
			max-width: 300rpx;
			max-height: 400rpx;
		}
	}

	.u-flex-reserve {
		flex-direction: row-reverse;
	}

	.u-text-reserve {
		text-align: left;
	}
</style>
